{% extends "base.html" %}
{% load staticfiles %}

{% block page_content %}
<section class="content-header" style="padding-top:0px" xmlns="http://www.w3.org/1999/html">
<div class="row">
    <div class="box box-info">
        <div class="box-header">
            <h2>Detections and Frames in coarse code {{ code }}</h2>
        </div>
    </div>
</div>
</section>
<section class="content">
    <div class="row">
        <div class="col-lg-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h4>Clustering results & associated </h4>
                </div>
                <div class="box-body">
                    <table class="table dataTables">
                        <thead>
                        <tr>
                            <th class="text-center">Type</th>
                            <th class="text-center">Video</th>
                            <th class="text-center">Fine</th>
                            <th class="text-center">Detection</th>
                            <th class="text-center">Frame</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for k in objects %}
                        {% if k.detection %}
                        <tr>
                            <th>Detection</th>
                            <th><a href="/videos/{{ k.video_id }}/">{{ k.video.name }}</a></th>
                            <th>{{ k.fine_text }}</th>
                            <th><a href="/frames/{{ k.frame_id }}/"><img style="height:100px;margin: auto" class="img-responsive" src="{{ MEDIA_URL }}{{ k.video.pk }}/regions/{{ k.detection_id }}.jpg"></a></th>
                            <th><a href="/frames/{{ k.frame_id }}/"><img style="height:100px;margin: auto" class="img-responsive" src="{{ MEDIA_URL }}{{ k.video.pk }}/frames/{{ k.frame.frame_index }}.jpg"></a></th>

                        </tr>
                        {% else %}
                        <tr>
                            <th>Frame</th>
                            <th><a href="/videos/{{ k.video_id }}/">{{ k.video.name }}</a></th>
                            <th>{{ k.fine_text }}</th>
                            <th></th>
                            <th><a href="/frames/{{ k.frame_id }}/"><img style="height:100px;margin: auto" class="img-responsive" src="{{ MEDIA_URL }}{{ k.video.pk }}/frames/{{ k.frame.frame_index }}.jpg"></a></th>
                        </tr>
                        {% endif %}
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}
{% block page_js%}
<script>
    $(document).ready(function() {
        InitializeTables();
    })
</script>
{% endblock %}
